﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户管理系统</title>
    <!-- 引入Vue和Element Plus -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
</head>
<body>
    <div id="app" style="padding: 20px;">
        <!-- 页面标题 -->
        <h2 style="margin-bottom: 20px;">客户管理</h2>

        <!-- 1. 搜索筛选区域 -->
        <el-form inline :model="searchForm" style="margin-bottom: 20px;">
            <el-form-item label="客户">
                <el-input v-model="searchForm.customerName" placeholder="请输入客户名称/编号" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="searchForm.status" placeholder="请选择" style="width: 150px;">
                    <el-option label="全部" value="" />
                    <el-option label="启用" value="启用" />
                    <el-option label="禁用" value="禁用" />
                </el-select>
            </el-form-item>
            <el-form-item label="所属行业">
                <el-select v-model="searchForm.industry" placeholder="请选择" style="width: 150px;">
                    <el-option label="全部" value="" />
                    <el-option label="零售" value="零售" />
                    <el-option label="制造" value="制造" />
                    <el-option label="制药厂" value="制药厂" />
                    <el-option label="工程" value="工程" />
                    <el-option label="原厂商" value="原厂商" />
                    <el-option label="服务商" value="服务商" />
                    <el-option label="代理商" value="代理商" />
                    <el-option label="金融业" value="金融业" />
                    <el-option label="教育" value="教育" />
                </el-select>
            </el-form-item>
            <el-form-item label="联系人">
                <el-input v-model="searchForm.contact" placeholder="请输入联系人" style="width: 180px;" />
            </el-form-item>
            <el-form-item>
                <!-- 简化事件绑定，仅占位不实现逻辑 -->
                <el-button type="primary" v-on:click ="handleSearch">查询</el-button>
                <el-button v-on:click ="resetForm">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 2. 操作按钮区域 -->
        <div style="margin-bottom: 20px;">
            <!-- 按钮仅显示，暂不实现点击逻辑 -->
            <el-button type="primary">新增</el-button>
            <el-button type="danger" :disabled="selectedRows.length === 0">删除</el-button>
            <el-button :disabled="selectedRows.length !== 1">复制</el-button>
            <el-button>导出</el-button>
            <el-button>导入</el-button>
            <el-button v-on:click ="handleRefresh">刷新</el-button>
        </div>

        <!-- 3. 客户数据表格 -->
        <el-table :data="filteredData"
                  border
                  style="width: 100%; margin-bottom: 20px;"
        v-on:selection-change ="handleSelectionChange">
            <!-- 绑定选择事件，仅存选中行 -->
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="customerCode" label="客户编码" width="120" />
            <el-table-column prop="customerName" label="客户名称" width="150" />
            <el-table-column prop="industry" label="所属行业" width="120" />
            <el-table-column prop="source" label="客户来源" width="120" />
            <el-table-column prop="contact" label="联系人" width="100" />
            <el-table-column prop="phone" label="联系电话" width="130" />
            <el-table-column prop="email" label="电子邮箱" width="180" />
            <el-table-column prop="dept" label="销售部门" width="120" />
            <el-table-column prop="salesman" label="销售负责人" width="120" />
            <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                    <el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">
                        {{ scope.row.status }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <!-- 操作按钮仅显示，暂不实现逻辑 -->
                    <el-button size="small" type="primary">编辑</el-button>
                    <el-button size="small" type="text">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 4. 分页组件 -->
        <el-pagination :current-page="pageInfo.pageIndex"
                       :page-size="pageInfo.pageSize"
                       :page-sizes="[5, 10, 15, 20]"
                       :total="totalCount"
                       layout="total, sizes, prev, pager, next, jumper"
        v-on:size-change ="handleSizeChange" 
            v-on:current-change="handleCurrentChange" />
    </div>

    <script>
        // 从全局 Vue 中解构需要的 API
        const { createApp, ref, computed } = Vue;

        // 创建应用实例
        createApp({
          setup() {
            // 1. 修复：定义搜索表单变量（初始化空对象，确保v-model能绑定）
            const searchForm = ref({
              customerName: '',  // 客户名称/编号
              status: '',        // 状态
              industry: '',      // 所属行业
              contact: ''        // 联系人
            });

            // 2. 修复：定义客户原始数据（模拟3条测试数据，让表格有内容）
            const customerData = ref([
              {
                customerCode: 'C001',
                customerName: '阿里巴巴集团',
                industry: '互联网',
                source: '官网注册',
                contact: '张三',
                phone: '13800138000',
                email: 'zhangsan@alibaba.com',
                dept: '销售一部',
                salesman: '李四',
                status: '启用'
              },
              {
                customerCode: 'C002',
                customerName: '腾讯科技',
                industry: '互联网',
                source: '展会合作',
                contact: '王五',
                phone: '13900139000',
                email: 'wangwu@tencent.com',
                dept: '销售二部',
                salesman: '赵六',
                status: '启用'
              },
              {
                customerCode: 'C003',
                customerName: '百度在线',
                industry: '互联网',
                source: '推荐',
                contact: '钱七',
                phone: '13700137000',
                email: 'qianqi@baidu.com',
                dept: '销售一部',
                salesman: '孙八',
                status: '禁用'
              }
            ]);

            // 3. 分页信息（原代码保留，确保分页组件有数据）
            const pageInfo = ref({
              pageIndex: 1,  // 当前页码
              pageSize: 10   // 每页条数
            });

            // 4. 筛选后的数据（原逻辑保留，基于模拟数据筛选）
            const filteredData = computed(() => {
              let result = customerData.value.filter(item => {
                // 客户名称/编号模糊匹配
                const matchName = item.customerName.includes(searchForm.value.customerName)
                                || item.customerCode.includes(searchForm.value.customerName);
                // 状态筛选（空则匹配全部）
                const matchStatus = !searchForm.value.status || item.status === searchForm.value.status;
                // 行业筛选（空则匹配全部）
                const matchIndustry = !searchForm.value.industry || item.industry === searchForm.value.industry;
                // 联系人模糊匹配
                const matchContact = item.contact.includes(searchForm.value.contact);
                return matchName && matchStatus && matchIndustry && matchContact;
              });

              // 分页截取数据
              const startIndex = (pageInfo.value.pageIndex - 1) * pageInfo.value.pageSize;
              return result.slice(startIndex, startIndex + pageInfo.value.pageSize);
            });

            // 5. 总条数（基于模拟数据计算）
            const totalCount = computed(() => {
              return customerData.value.filter(item => {
                const matchName = item.customerName.includes(searchForm.value.customerName)
                                || item.customerCode.includes(searchForm.value.customerName);
                const matchStatus = !searchForm.value.status || item.status === searchForm.value.status;
                const matchIndustry = !searchForm.value.industry || item.industry === searchForm.value.industry;
                const matchContact = item.contact.includes(searchForm.value.contact);
                return matchName && matchStatus && matchIndustry && matchContact;
              }).length;
            });

            // 6. 选中的行（用于控制删除/复制按钮禁用状态）
            const selectedRows = ref([]);

            // 7. 搜索按钮事件（仅重置页码，暂不实现复杂逻辑）
            const handleSearch = () => {
              pageInfo.value.pageIndex = 1;
            };

            // 8. 重置按钮事件（清空表单+重置页码）
            const resetForm = () => {
              searchForm.value = {
                customerName: '',
                status: '',
                industry: '',
                contact: ''
              };
              pageInfo.value.pageIndex = 1;
            };

            // 9. 分页：每页条数变化（仅更新页码，暂不请求数据）
            const handleSizeChange = (newSize) => {
              pageInfo.value.pageSize = newSize;
              pageInfo.value.pageIndex = 1;
            };

            // 10. 分页：页码变化（仅更新页码，暂不请求数据）
            const handleCurrentChange = (newPage) => {
              pageInfo.value.pageIndex = newPage;
            };

            // 11. 表格选择事件（仅存储选中行，控制按钮禁用状态）
            const handleSelectionChange = (rows) => {
              selectedRows.value = rows;
            };

            // 12. 刷新按钮事件（仅重置页码，暂不重新请求数据）
            const handleRefresh = () => {
              pageInfo.value.pageIndex = 1;
            };

            // 返回模板需要的变量和方法
            return {
              searchForm,        // 搜索表单
              pageInfo,          // 分页信息
              filteredData,      // 筛选后的数据
              totalCount,        // 总条数
              selectedRows,      // 选中的行
              handleSearch,      // 搜索
              resetForm,         // 重置
              handleSizeChange,  // 每页条数变化
              handleCurrentChange, // 页码变化
              handleSelectionChange, // 表格选择
              handleRefresh      // 刷新
            };

          }
        })
        // 注册 Element Plus 组件
        .use(ElementPlus)
        // 挂载到 id 为 app 的元素上
        .mount('#app');
    </script>
</body>
</html>